<template>
    <div class="main flex-column">
        <div class="search flex-row">
            <input type="text" placeholder="请输入要查找的常用语" v-model="value" class="flex-item">
            <button class="btn"><Icon type="wrench" size='16' ></Icon></button>
            <button class="btn" @click="spendMenu"><Icon :class="{'arrow-rotate':isSpeard}" type="arrow-up-b" size='16'></Icon></button>
        </div>
        <div class="tree-list flex-item" @contextmenu="contextmenuFn">
            <Tree :data="data1" @on-select-change="nodeClick"></Tree>
            <vue-context-menu 
                @sendMsg="sendMsg"
                @copyToClipboard="copyToClipboard"
                @copy="copy"
                @wordsManage="wordsManage"
                @refreshWords="refreshWords"
                :contextMenuData="contextMenuData">
            </vue-context-menu>
        </div>
    </div>
</template>
<script>
import eventBus from '@/pages/index/utils/eventBus'

export default {
    data () {
        return {
            value: '',
            isContext: false,
            isSpeard: true,
            data1:  [
                {
                    title: 'parent 1',
                    expand: true,
                    children: [
                        {
                            title: 'leaf 1-1'
                        },
                        {
                            title: 'leaf 1-2',
                        }
                    ]
                },
                {
                    title: 'parent 2',
                    expand: true,
                    children: [
                        {
                            title: 'leaf 2-1'
                        },
                        {
                            title: 'leaf 2-2'
                        }
                    ]
                },
                {
                    title: 'parent 3',
                    expand: true,
                    children: [
                        {
                            title: 'leaf 3-1',
                            render: (h, { root, node, data }) => {

                                return h('span',{
                                    class: {
                                        'ivu-tree-title':true
                                    },
                                    on: {
                                        mouseover: () => { this.$Message.info(data.title) },
                                        click: (e) => {
                                            e.target.parentNode.classList.add('ivu-tree-title-selected')
                                            // console.log();
                                        }
                                    }
                                },[h('span',data.title)])
                            }
                        },
                        {
                            title: 'leaf 3-2',
                            // render: (h, { root, node, data }) => {
                            //     return h('Tooltip',{
                            //         props:{
                            //             content:data.title
                            //         }
                            //     },[h('span',data.title)])
                            // }
                        }
                    ]
                }
            ],
            contextMenuData: {
                menuName: 'demo',
                axios: {
                    x: null,
                    y: null
                },
                menulists: [
                    {
                        fnHandler: 'sendMsg', // Binding events(绑定事件)
                        btnName: '发送给访客(V)' // The name of the menu option (菜单名称)
                    },{
                        fnHandler: 'copyToClipboard',
                        btnName: '编辑后发送(W)'
                    },{
                        fnHandler: 'copy',
                        btnName: '复制内容(X)'
                    },{
                        fnHandler: 'wordsManage',
                        btnName: '常用语管理(Y)'
                    },{
                        fnHandler: 'refreshWords',
                        btnName: '刷新(Z)'
                    }
                ]
            }
        }
    },
    methods: {
        spendMenu () {//展开收起
            for (let i=0;i<this.data1.length;i++) {
                let sub = this.data1[i];
                this.isSpeard ? (sub.expand = false) : (sub.expand = true);
            }
            this.isSpeard = !this.isSpeard;
        },
        reloadTree (newVal) {
            console.log("new", newVal);
        },
        contextmenuFn (e) {
            event.preventDefault()
            var x = event.clientX
            var y = event.clientY
            // Get the current location
            this.contextMenuData.axios = {
                x, y
            }
        },
        sendMsg () {
            this.$Message.info('发送消息');
        },
        copyToClipboard () {

        },
        copy () {

        },
        wordsManage () {

        },
        refreshWords () {

        },
        nodeClick (e) {
            console.log("data",e);
        }
    },
    watch: {
        value: function (newVal, oldVal) {
            this.reloadTree(newVal);
        }
    },
    mounted () {
        eventBus.$on('fileChange', (type) => {
            console.log("收到通知", type);
            //请求常用**数据

        });
    }
}
</script>
<style lang="scss" scoped>
.main {
    position: relative;
    padding-bottom: 20px;

    .search {
        width: 100%;
        height: 24px;
        padding: 2px 2px 0 4px;
        background-color: $c_14;

        input {
            height: 20px;
            
        }

        .btn {
            width: 32px;
            border:solid 1px transparent;
            height: 22px;
            background-color: transparent;
            border-radius: 4px;

            &:hover {
                background-color: $c_28;
                border-color: $c_11;
            }

            .arrow-rotate {
                transition: all 0.15s;
                transform: rotate(180deg);
            }
        }

    }

    .tree-list {
    }
}
</style>
